<template>
  <view>
    <image
      class="pic-main"
      :src="picdetail.pic_display"
      mode="widthFix"
    ></image>
    <view class="swiper-textbar">
      <text
        class="swiper-text"
        :class="swiper_current == 0 ? 'swiper-text-active' : ''"
        @click="onSwiperBarClicked(0)"
        >简介</text
      >
      <text
        class="swiper-text"
        :class="swiper_current == 1 ? 'swiper-text-active' : ''"
        @click="onSwiperBarClicked(1)"
        >评论</text
      >
    </view>
    <swiper
      :current="swiper_current"
      @change="onSwiperChange"
      :style="{ height: swiperHeight + 'px' }"
      class="swiper-main"
    >
      <swiper-item>
        <view class="pic-detail component">{{ picdetail.pic_id }}</view>
      </swiper-item>
      <swiper-item
        ><view class="all-comments component">aaabbb</view></swiper-item
      >
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgAddr: "",
      picdetail: {
        pic_id: "",
        pic_display: "",
      },
      swiper_current: 0,
      swiperHeight: 150,
    };
  },
  onLoad: function (e) {
    // console.log(e.picid);
    this.getPicture(e.picid);
  },
  onReady: function () {
    this.setSwiperHeight()
  },
  methods: {
    getPicture: function (e) {
      e = JSON.parse(e);
      console.log(e);
      this.picdetail = e;
      console.log(this.picdetail);
      uni.setNavigationBarTitle({ title: "图片 - " + this.picdetail.pic_id });
    },
    onSwiperChange: function (e) {
      // console.log(e);
      this.swiper_current = e.detail.current;
      this.setSwiperHeight();
      // console.log(this.swiper_current);
    },
    onSwiperBarClicked: function (e) {
      this.swiper_current = e;
    },
    setSwiperHeight() {
      let query = uni.createSelectorQuery().in(this);
      query.selectAll(".component").boundingClientRect();
      // console.log(query.select(".component"));
      query.exec((res) => {
        this.swiperHeight = res[0][this.swiper_current].height;
        // console.log(res[0][this.swiper_current].height);
        // console.log(res);
      });
    },
  },
};
</script>

<style>
.swiper-main {
  box-shadow: 0 0 5rpx lightgrey;
}
.pic-main {
  display: block;
  margin: 0 auto;
  width: 100%;
}
.swiper-textbar {
  display: flex;
  justify-content: space-evenly;
}
.swiper-text {
  color: grey;
  font-size: 0.8em;
  padding: 0.4em;
}
.swiper-text-active {
  color: deepskyblue;
}
uni-swiper-item {
  min-height: 100%;
}
</style>